<template>
	<div  style="width: 100%;padding: 30px;box-sizing: border-box;">
		<el-table
	    :data="tableData3"
	    height="500"
	    border
	    v-loading='loading'
	    style="width: 100%">
	    <el-table-column type='index'
	    	:index='indexMethod'
	      label="序号"
	    align='center'
	      width="100">
	    </el-table-column>
	    <el-table-column
	      prop="platformName"
	      align='center'
	      label="业务系统名称"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      prop="platformId"
	      align='center'
	      label="业务系统id"
	      width="300">
	    </el-table-column>
	     <el-table-column align="center" label="注册日期-停用信息" width="380">
			<template slot-scope="scope" v-if="scope.row.fromDate">
				{{scope.row.fromDate}}-{{scope.row.toDate}}
			</template>
		</el-table-column>
		<el-table-column
	      prop="peopleNum"
	      align='center'
	      label="人员数量"
	      width="300">
	    </el-table-column>
	     <el-table-column align="center" label="操作" width="194">
			<template slot-scope="scope">
				<el-button @click='flag=true'>详情</el-button>
			</template>
		</el-table-column>
	  </el-table>
	  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size='20' layout="total,sizes,prev,pager,next,jumper" :total="total"></el-pagination>
	  <div>
	  	<el-dialog title='详情' :visible.sync='flag' width='40%' >
	  		<el-form >
	  			<h3>业务基础信息</h3>
	  			<el-form-item label='单位名称' :rules="[{ required: true}]">
	  				<el-input v-model='form2.account'></el-input>
	  			</el-form-item>
	  			<el-form-item label='单位编号' :rules="[{ required: true}]">
	  				<el-input v-model='form2.name'></el-input>
	  			</el-form-item>
	  			<el-form-item label='创建时间' :rules="[{ required: true}]">
	  				<el-input v-model='form2.join'></el-input>
	  			</el-form-item>
	  			<el-form-item label='停用时间' :rules="[{ required: true}]">
	  				<el-input v-model='form2.leave'></el-input>
	  			</el-form-item>
	  			<el-form-item label='状态' :rules="[{ required: true}]">
	  				<el-radio-group v-model='form2.state'>
	  					<el-radio label='有效' name='type'></el-radio>
	  					<el-radio label='离职' name='type'></el-radio>
	  				</el-radio-group>
	  			</el-form-item>
	  				<el-form-item label='单位类型'>
	  				<el-input v-model='form2.account'></el-input>
	  			</el-form-item>
	  			<el-form-item label='单位级别'>
	  				<el-input v-model='form2.name'></el-input>
	  			</el-form-item>
	  			<el-form-item label='单位联系人'>
	  				<el-input v-model='form2.join'></el-input>
	  			</el-form-item>
	  			<el-form-item label='联系电话'>
	  				<el-input v-model='form2.join'></el-input>
	  			</el-form-item>
	  		</el-form>
	  		<div>
	  			<h3>父级单位信息</h3>
		  		<el-table
				    :data="tableData3"
				    height="100"
				    border
				    v-loading='loading'
				    style="width: 100%">
				    <el-table-column
				      prop="index"
				      align='center'
				      label="序号">
				    </el-table-column>
				    <el-table-column
				      prop="platformId"
				      align='center'
				      width='200'
				      label="父级单位名称">
				    </el-table-column>
				    <el-table-column
				      prop="companyName"
				      align='center'
				      width='200'
				      label="父级单位编号">
				    </el-table-column>
				     <el-table-column
				      prop="companyName"
				      align='center'
				      label="设置时间">
				    </el-table-column>
				  </el-table>
	  		</div>
	  	</el-dialog>
	  </div>
	</div>	
</template>
<script>
	import {mapState,mapActions} from 'vuex'
import MD5 from 'md5'
	export default {
    data() {
      return {
      	currentPage:1,
      	total:0,
      	limit:20,
      	loading:false,
        tableData3: [],
        flag:false,
        form2:{
        	join:'',
        	leave:'',
        	account:'',
        	name:'',
        	state:'',
        	id:'',
        	role:'',
        	special:''
        },
         rules: {
          join: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    computed: {
			...mapState({
				navList: 'navList',
				activeIndex: 'activeIndex',
				detailMessage:'detailMessage'
			})
		},
    methods:{
    	
    	indexMethod(index){
    		return this.limit*(this.currentPage-1)+index+1
    	},
    	...mapActions([
				'changeIndex',
			]),
    	checkIndex(){
				let activePath = this.$route.path
				let index = 0
				switch(activePath) {
					case '/basicMessage':
						index = 0;
						break;
					case '/workExperience':
						index = 1;
						break;
					case '/trainFiles':
						index = 2;
						break;
					case '/studyRecord':
						index = 3;
						break;
					case '/certificateMessage':
						index = 4;
					default:
						index = 5;
						break;
				}
				this.changeIndex(index)
			},
    	handleSizeChange(val){
    		this.limit = val
    		this.getWork()
    	},
    	handleCurrentChange(val){
    		this.currentPage = val
    		this.getWork()
    	},
      getWork(){
      	let that = this
      	let timestamp = Date.parse(new Date())
    	let param = {
					//'code':"1535616441742",
					'code':this.detailMessage.code,
					'pageSize':this.limit,
					'pageNum':this.currentPage
				}
        Object.keys(param).forEach(function(key){
        	if(param[key]=='' || (!param[key])){
        		delete param[key]
        	}
        })
        
        
        let reqUrl = localStorage.getItem('ApiUrl')+'/idc/company/bussinessInfo'   
        
        this.$ajax.post(reqUrl,param,{headers:{
						'Content-Type':'application/json',
						'platformCode':'20180830',
						'authorization':MD5('1idc89757'),
						'timestamp':'1'
						
					}
       })
        .then(function(res){
			that.loading=false
			let obj = res.data
			if(obj.code==200){
				that.tableData3=obj.data.list
				that.total = obj.data.total
			}else{
				that.$message({
					message:obj.message,
					duration:5000
				})
			}
        })
        .catch((err)=>{
        	console.log(err)
        })
      }
     },
     mounted(){
     	//this.checkIndex()
     	this.getWork()
     }
  };
</script>
<style type="text/css" scoped="scoped">
	h3{
		line-height: 40px;
		
	}
	.el-dialog__body{
		padding-top:0;
	}
	.el-form-item__content{
		float:left;
	}
	.el-form-item {
    	margin-bottom: 10px;
	}
	.el-form-item__label{
		width:100px;
	}
	.last .el-form-item__label{
		width:160px;
	}
</style>